<!-- 车辆维修 -->
<template>
  <div class="page-container">
    <div class="quick-search">
      <div
        v-for="item in quickSearchData"
        :key="item.key"
        class="quick-search-item"
        :class="[item.checked ? 'quick-search-item-checked' : '', item.theme]"
        @click="quickSearchClick(item)"
      >
        <div class="quick-search-item-label">{{ item.label }}</div>
        <div class="quick-search-item-value">{{ item.value + ' 元' }}</div>
      </div>
    </div>
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" @reset="handleReset" />
    <table-index
      :selectedKeys="selectedRowKeys"
      :table="table"
      @loadData="loadData"
      @selection-change="selectionChange"
      @pagenationChange="pagenationChange"
    >
      <!-- <template #selectkey="{ record }">
        <div class="check-box" v-if="record.recordStatus == 10 && record.canOperate == 1"> -->
      <!-- <a-checkbox :value="record.id" @change="checkboxChange($event, record.id)" /> -->
      <!-- <a-checkbox :model-value="setValue[record.id]" class="check_box" @change="checkboxChange($event, record.id)" />
        </div>
        <div v-else> </div>
      </template> -->
      <template #costInfo="{ record }">
        <div>{{ record.confirmUserName || '-' }}</div>
        <div>{{ record.confirmTime || '-' }}</div>
      </template>
      <template #customerInfo="{ record }">
        <div>{{ record.customerName }}</div>
        <div>{{ record.customerAccount }}</div>
      </template>
      <!-- 业务单信息 -->
      <template #orderInfo="{ record }">
        <!-- 违章费流水  -->
        <div v-if="record.violationCode">
          <div v-if="record.violationCode">
            <div class="order-info-item"> 违章单号</div>
            <a-link v-if="record.violationCode" class="a-link" @click="() => toiolaOrderDetail(record)">
              {{ record.violationCode }}
            </a-link>
          </div>
          <div v-if="record.orderCode">
            <div class="order-info-item"> 关联单号</div>
            <a-link v-if="record.orderCode" class="a-link" @click="() => toOrderDetail(record)">
              {{ record.orderCode }}
            </a-link>
          </div>
        </div>
        <div v-else>
          <!-- 业务类型 bizType-5 运营成本 -->
          <div v-if="record.bizType == 5">
            <div v-if="record.workOrderCode || record.orderCode">
              <div v-if="record.workOrderCode">
                <div class="order-info-item"> {{ record.workOrderTypeName || '-' }}</div>
                <a-link v-if="record.workOrderCode" class="order-info-item a-link" @click="() => toWorkDetail(record)">
                  {{ record.workOrderCode }}
                </a-link>
              </div>

              <div class="td-divider" v-if="record.workOrderCode && record.orderCode"></div>

              <div v-if="record.orderCode">
                <div class="order-info-item"> {{ record.orderTypeName || '-' }}</div>
                <a-link v-if="record.orderCode" class="order-info-item a-link" @click="() => toOrderDetail(record)">
                  {{ record.orderCode }}
                </a-link>
              </div>
            </div>
            <div v-else>-</div>
          </div>
          <div v-else>
            <div v-if="record.orderCode || record.channelOrderCode">
              <div class="order-info-item">
                <div>自有</div>
                <div v-if="record.orderType == 1">{{ record.orderCode }}</div>
                <a-link v-else-if="record.orderCode" class="order-info-item a-link" @click="() => toOrderDetail(record)">
                  {{ record.orderCode }}
                </a-link>
                <div>{{ record.orderCreateTime }}</div>
              </div>
              <div class="order-info-item" v-if="record.channelOrderCode">
                <div>渠道</div>
                <a-link v-if="record.channelOrderCode" class="order-info-item a-link" @click="() => toChannelOrderDetail(record)">
                  {{ record.channelOrderCode }}
                </a-link>
              </div>
              <!-- 渠道展示 订单标签 -->
              <div class="order-info-item" v-if="record.channelOrderCode">
                <tag type="primary">{{ record.channelOrderTypeName }}</tag>
              </div>
            </div>
            <div v-else> - </div>
          </div>
        </div>
      </template>
      <!-- 车辆信息 -->
      <template #carInfo="{ record }">
        <div>车牌号：{{ record.carLicenseNo || '-' }}</div>
        <div>车型：{{ record.carModelName || '-' }}</div>
      </template>

      <template #confirmInfo="{ record }">
        <div>{{ record.operateUserName || '-' }}</div>
        <div>{{ record.operateTime || '-' }}</div>
      </template>
      <!-- 费用名称 -->
      <template #feeName="{ record }">
        <a-typography-paragraph
          @click="viewMoreFeeName(record)"
          style="color: rgb(68, 142, 247); cursor: pointer; margin-bottom: 0"
          :ellipsis="{
            rows: 3,
            showTooltip: true,
          }"
        >
          {{ record.feeNameStr || '-' }}
        </a-typography-paragraph>
      </template>
    </table-index>
  </div>
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/orderRecord/importExcel" download-import="/流水导入对账模板.xlsx" @ok="loadData(1)" />
  <form-modal ref="form_modal" @save="loadData" />
  <batch-confirm ref="batch_confirm" @save="refreshData" />
  <confirm-fee ref="confirm_fee" @ok="loadData" />
  <!-- 修改佣金 -->
  <edit-commission-modal ref="editCommissionModalRef" @ok="loadData" />
  <MoreFeeName ref="moreFeeNameModalRef" />
  <!-- 运营支出费用详情弹框 -->
  <CostFeeModal ref="costFeeModalRef" />
  <!-- 详情 -->
  <Modals.CarInspectDetailModal ref="carInspectDetailModalRef" />
  <Modals.CarMaintenanceDetailModal ref="carMaintenanceDetailModalRef" />
</template>

<script setup name="TurnoverList">
  import FormModal from './form/index.vue'
  import BatchConfirm from './form/batch-confirm.vue'
  import editCommissionModal from './components/edit-commission-modal.vue'
  import ConfirmFee from './form/confirm-fee.vue'
  import MoreFeeName from './components/moreFeeName.vue'
  import CostFeeModal from './components/cost-fee-modal.vue'
  import Modals from './components/modals'

  import { ref, reactive, onMounted, computed } from 'vue'
  import { Message, Modal } from '@arco-design/web-vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { usePageDict } from '@/hooks/useDict'
  import {
    getList,
    getNums,
    revoke,
    getBatchCost,
    reject,
    exportTurnover,
    getTenantAllAccount,
    getWayByAccount,
  } from '@/api/finance/turnover'
  import { getOperateSubject } from '@/api/order/sOrder'
  import dayjs from 'dayjs'
  import { useExport } from '@/hooks/list'
  import { usePermission } from '@/hooks/usePermission'
  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()
  const imoportRef = ref(null)
  const dict = usePageDict('turnoverDict')
  const feeNameData = ref([])
  const isDisabled = ref(true)
  // 查询条件
  const searchList = computed(() => {
    let searchOpt = []
    // 当服务类型选择自驾短租/长租时，展示实际还车时间、订单状态
    if ([1, 4].includes(queryParam.bizType)) {
      searchOpt.push(
        {
          label: '实际还车时间',
          prop: 'returnCarDate',
          type: 'i-range-picker',
          attrs: {
            showTime: true,
            timePickerProps: {
              defaultValue: ['00:00:00', '23:59:59'],
            },
          },
          change: (value = []) => {
            queryParam.actualEndTimeBegin = value[0]
            queryParam.actualEndTimeEnd = value[1]
          },
        },
        {
          label: '订单状态',
          prop: 'orderStatusList',
          type: 'a-select',
          options: dict.orderStatusEnum,
          attrs: {
            multiple: true,
          },
        }
      )
    }
    return [
      {
        label: '收付款时间',
        prop: 'paymentDate',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:59:59'],
          },
        },
        change: (value = []) => {
          queryParam.minPaymentTime = value[0]
          queryParam.maxPaymentTime = value[1]
        },
      },
      { label: '业务单信息', prop: 'orderCodeLike', type: 'a-input' },
      { label: '流水号', prop: 'recordCodeLike', type: 'a-input' },
      { label: '客户名称', prop: 'customerNameLike', type: 'a-input' },
      {
        label: '服务类型',
        prop: 'bizType',
        type: 'a-select',
        options: dict.bizTypeEnum,
        change: (value) => {
          queryParam.feeNameIds = []
          if (value == 1) {
            feeNameData.value = dict.orderFeeNameEnumForShortOrder
          } else if (value == 2) {
            feeNameData.value = dict.orderFeeNameEnumForCar
          } else if (value == 4) {
            feeNameData.value = dict.orderFeeNameEnumForCzsOrder
          } else if (value == 5) {
            feeNameData.value = dict.orderFeeNameEnumForCost
          }
          isDisabled.value = [undefined, null, ''].includes(value)
          // 当服务类型选择自驾短租/长租时，展示实际还车时间、订单状态
          if (![1, 4].includes(value)) {
            queryParam.orderStatusList = []
            queryParam.returnCarDate = []
            queryParam.actualEndTimeBegin = ''
            queryParam.actualEndTimeEnd = ''
          }
        },
      },
      {
        label: '流水状态',
        prop: 'recordStatusList',
        type: 'a-select',
        options: dict.recordStatusEnum,
        attrs: {
          multiple: true,
        },
      },
      { label: '车牌号', prop: 'carLicenseNoLike', type: 'a-input' },
      {
        label: '费用名称',
        prop: 'feeNameIds',
        type: 'a-select',
        disabled: isDisabled.value || !queryParam.bizType,
        options: feeNameData,
        attrs: {
          multiple: true,
          placeholder: isDisabled.value ? '请先选择服务类型' : '请选择',
        },
      },
      {
        label: '费用类型',
        prop: 'feeType',
        type: 'a-select',
        options: dict.feebizTypeEnum,
      },
      {
        label: '收支类型',
        prop: 'recordType',
        type: 'a-select',
        options: dict.paymentWayEnum,
      },
      {
        label: '费用产生机构',
        prop: 'orgIdList',
        type: 'remote-select',
        attrs: {
          type: 'org_listByStaff_multiple',
        },
      },
      {
        label: '收支方式',
        prop: 'paymentWayList',
        type: 'a-select',
        options: wayByAccountList,
        attrs: {
          multiple: true,
        },
        change: (value) => {
          getAccountList(value)
        },
      },
      {
        label: '收付款账号',
        prop: 'payAccountList',
        type: 'a-select',
        options: accountList,
        attrs: {
          multiple: true,
        },
        change: (value) => {
          getwayByAccountList(value)
        },
      },
      {
        label: '流水确认时间',
        prop: 'operateTimeRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:23:59'],
          },
        },
        change: (value = []) => {
          queryParam.operateTimeS = value[0]
          queryParam.operateTimeE = value[1]
        },
      },
      { label: '运营主体', prop: 'accountIdList', type: 'a-select', options: siteList, multiple: true },
      {
        label: '订单渠道',
        prop: 'channelTypeList',
        type: 'a-select',
        options: dict.shortOrderChannelType,
        attrs: {
          multiple: true,
        },
      },
      {
        label: '确认费用时间',
        prop: 'queryDate',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:59:59'],
          },
        },
        change: (value = []) => {
          queryParam.minConfirmTime = value[0]
          queryParam.maxConfirmTime = value[1]
        },
      },
      ...searchOpt,
    ]
  })
  const quickSearchData = ref([
    {
      key: 1,
      label: '今日流水',
      value: 0,
      checked: false,
      theme: 'blue',
    },
    // {
    //   key: 3,
    //   label: '今日租赁流水',
    //   value: 0,
    //   checked: false,
    //   theme: 'blue',
    // },
    // {
    //   key: 4,
    //   label: '今日对账流水',
    //   value: 0,
    //   checked: false,
    //   theme: 'blue',
    // },
    // {
    //   key: 2,
    //   label: '待确认流水',
    //   value: 0,
    //   checked: false,
    //   theme: 'red',
    // },
    {
      key: 5,
      label: '网络平台代结',
      value: 0,
      checked: false,
      theme: 'red',
    },
  ])

  const queryParam = reactive({
    queryDate: [],
    paymentDate: [],
    operateTimeRange: [],
    recordStatusList: [],
    returnCarDate: [],
  })

  // 去运营支出费用详情 报销费用流水：bizType=5;支出费用流水：bizType=6
  const hide_56_BizType = (record) => {
    return record.bizType != 5 && record.bizType != 6
  }

  // table 配置
  const table = useTable({
    columns: [
      { title: '业务单信息', slotName: 'orderInfo', fixed: 'left', width: 240 },
      { title: '费用产生机构', dataIndex: 'orgName', width: 150 },
      { title: '收支金额', dataIndex: 'orderAmount', unit: '元', titleTooltipContent: '收支金额=费用名称下所有费用的总和', width: 140 },
      { title: '收付款客户姓名', dataIndex: 'customerName', slotName: 'customerInfo', width: 150 },
      { title: '车辆信息', slotName: 'carInfo', width: 240 },
      {
        title: '费用名称',
        width: 150,
        slotName: 'feeName',
      },
      { title: '收/付款时间', dataIndex: 'paymentTime', width: 170 },
      { title: '费用确认信息', slotName: 'costInfo', width: 170 },
      {
        title: '费用类型',
        dataIndex: 'feeTypeName',
        width: 100,
      },
      { title: '收支类型', dataIndex: 'recordTypeName', width: 100 },
      { title: '收支方式', dataIndex: 'paymentWayName', width: 120 },
      { title: '收支账号', dataIndex: 'payAccount', width: 150 },
      {
        title: '平台佣金',
        dataIndex: 'commissionAmount',
        unit: '元',
        titleTooltipContent: 'OTA渠道平台收取抽佣，（订单金额-商家承担优惠）*抽佣比例=平台佣金',
        width: 140,
      },
      {
        title: '销账金额',
        dataIndex: 'actualAmount',
        unit: '元',
        titleTooltipContent: '线上费用时，销帐金额=对账金额-平台佣金。线下费用时，销帐金额=收支金额',
        width: 140,
      },
      { title: '运营主体', dataIndex: 'accountSubject', width: 150 },
      { title: '流水号', dataIndex: 'recordCode', width: 150 },
      { title: '流水状态', dataIndex: 'recordStatusName', width: 110 },
      { title: '流水确认信息', slotName: 'confirmInfo', width: 180 },
      { title: '结算备注', dataIndex: 'remark', ellipsis: true },
    ],
    operates: [
      // 线上费用流水 按钮逻辑
      // 未确认：确认流水、修改佣金
      // 已确认：撤销
      // { name: "未确认", value: "10" }
      // { name: "已确认", value: "20" }
      // { name: "作废", value: "30" }
      // { name: "驳回", value: "40" }
      {
        label: '确认流水',
        permission: 'svms:finance:turnover.confirm',
        // 【未确认状态】
        show: (record) => hide_56_BizType(record) && record.recordStatus == 10 && record.canOperate == 1,
        method: (record) => handleConfirm(record),
      },
      {
        label: '修改佣金',
        permission: 'svms:finance:turnover.editCommission',
        // 【未确认状态且是线上费用】
        // 5.9.1.1 违章费的线上/下费用不能修改佣金
        show: (record) =>
          hide_56_BizType(record) && record.recordStatus == 10 && record.feeType == 2 && !record.feeNameStr.includes('违章费'),
        method: (record) => handleEditCommission(record),
      },
      {
        label: '修改信息',
        permission: 'svms:finance:turnover.edit',
        // 【未确认状态】
        show: (record) =>
          hide_56_BizType(record) &&
          record.recordStatus == 10 &&
          record.canOperate == 1 &&
          (record.feeType == 0 || record.feeType == 1) &&
          record.feeNameIds != '55',
        method: (record) => {
          handleEdit(record)
        },
      },
      {
        label: '驳回',
        permission: 'svms:finance:turnover.reject',
        // 【未确认状态，且是（线下或等于对账费用）】
        show: (record) =>
          hide_56_BizType(record) &&
          record.recordStatus == 10 &&
          record.canReject == 1 &&
          record.canOperate == 1 &&
          (record.feeType == 1 || record.feeType == 0) &&
          record.paymentWay != -1,
        method: (record) => handleReject(record),
      },
      {
        label: '撤销',
        permission: 'svms:finance:turnover.revoke',
        // 【已确认状态】
        show: (record) => hide_56_BizType(record) && record.recordStatus == 20 && record.canOperate == 1 && record.supportRevokeFlag == 1,
        method: (record) => handleRevoke(record),
      },
    ],
    buttons: [
      {
        label: '导出流水',
        permission: 'svms:finance:turnover.export',
        method: () => {
          useExport(exportTurnover, queryParam)
        },
      },
      {
        label: '平台导入对账',
        permission: 'svms:finance:turnover.import',
        method: () => handleImport(),
      },
      {
        label: '批量确认',
        type: 'primary',
        permission: 'svms:finance:turnover.barchConfirm',
        method: () => handleBatchConfirm(),
      },
    ],
    rowSelection: {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: true,
    },
  })

  const listData = ref([])
  // 列表接口调用
  const loadData = () => {
    let fn = useFetchTableDataApi(table, queryParam, getList)
    fn().then((res) => {
      table.dataList.map((it) => (it.disabled = [20, 30].includes(it.recordStatus)))
      selectedRowKeys.value = []
      listData.value = res.data
    })
  }

  const handleReset = () => {
    selectedRowKeys.value = []
    quickSearchData.value.forEach((ele) => {
      ele.checked = false
    })
    // loadData()
  }
  //快捷查询
  const quickSearchClick = (item) => {
    // 初始化
    queryParam.queryDate = []
    queryParam.paymentDate = []
    queryParam.minConfirmTime = undefined
    queryParam.maxConfirmTime = undefined
    queryParam.paymentWayList = []
    queryParam.feeType = undefined
    queryParam.recordStatusList = []
    quickSearchData.value.forEach((ele) => {
      if (ele.key == item.key) {
        ele.checked = true
      } else {
        ele.checked = false
      }
    })
    if (item.key == 1) {
      let startTime = dayjs().startOf('day').format('YYYY-MM-DD 00:00:00')
      let endTime = dayjs().endOf('day').format('YYYY-MM-DD 23:59:59')
      queryParam.queryDate[0] = startTime
      queryParam.queryDate[1] = endTime
      queryParam.minConfirmTime = startTime
      queryParam.maxConfirmTime = endTime
      queryParam.recordStatusList = []
    }
    if (item.key == 2) {
      queryParam.recordStatusList = [10, 40]
    }
    // if (item.key == 3) {
    //   queryParam.feeStatuses = [3, 5]
    // }
    // if (item.key == 4) {
    //   queryParam.feeStatuses = [1, 5]
    // }
    if (item.key == 5) {
      queryParam.feeType = 2
      queryParam.paymentWayList = ['1', '2']
      queryParam.recordStatusList = [10]
    }
    loadData()
  }

  // 选择 keys
  const selectedRowKeys = ref([])
  const checkboxChange = (e, id) => {
    const index = selectedRowKeys.value.indexOf(id)
    if (index > -1) {
      selectedRowKeys.value.splice(index, 1)
    } else {
      selectedRowKeys.value.push(id)
    }
  }

  // 页数选择后清空 复选框
  const pagenationChange = () => {
    selectedRowKeys.value = []
  }
  // 确认流水
  const form_modal = ref(null)
  const handleConfirm = (record) => {
    form_modal.value.show(record)
  }

  // 选择的数据中存在状态为：已确认、作废的流水单，则不支持【批量确认】，按钮置灰
  const isBatchConfirmDisabled = computed(() => {
    return selectedRowKeys.value.length
      ? selectedRowKeys.value.every((it) => {
          let currentItem = listData.value.find((item) => item.id == it)
          return [20, 30].includes(currentItem.recordStatus) ? false : true
        })
      : true
  })
  // 批量确认
  const batch_confirm = ref(null)
  const handleBatchConfirm = () => {
    if (selectedRowKeys.value.length) {
      console.log(selectedRowKeys.value)
      getBatchCost({ idList: selectedRowKeys.value }).then((res) => {
        if (res.code == 200) {
          batch_confirm.value.show(res.result, selectedRowKeys.value)
        }
      })
    } else {
      Message.warning('请先勾选需要确认的数据！')
    }
  }
  // 导入
  const handleImport = () => {
    imoportRef.value.show()
  }
  // 修改佣金
  const editCommissionModalRef = ref()
  const handleEditCommission = (record) => {
    editCommissionModalRef.value.open(record)
  }

  const confirm_fee = ref(null)
  // 修改信息
  const handleEdit = (record) => {
    confirm_fee.value.show(record)
  }
  // 撤销
  const handleRevoke = (record) => {
    Modal.confirm({
      title: '提示',
      simple: true,
      cancelText: '取消',
      okText: '确认',
      content: `请确认是否撤销当前流水？`,
      onOk: () => {
        revoke({ id: record.id }).then((res) => {
          if (res.code == 200) {
            Message.success('操作成功')
            loadData()
          }
        })
      },
    })
  }

  // 驳回
  const handleReject = (record) => {
    Modal.confirm({
      title: '提示',
      simple: true,
      cancelText: '取消',
      okText: '确认',
      content: `请确认是否驳回当前流水？`,
      onOk: () => {
        reject({ id: record.id }).then((res) => {
          if (res.code == 200) {
            Message.success('操作成功')
            loadData()
          }
        })
      },
    })
  }

  const selectionChange = (e) => {
    selectedRowKeys.value = e
  }
  const getNumsApi = () => {
    getNums({}).then((res) => {
      if (res.code == 200) {
        const result = res.result
        console.log(result)
        quickSearchData.value.forEach((item) => {
          if (item.key == 1) {
            item.value = result.todayRecord || 0
          }
          if (item.key == 2) {
            item.value = result.tbdRecord || 0
          }
          if (item.key == 3) {
            item.value = result.todayRentRecord || 0
          }
          if (item.key == 4) {
            item.value = result.todayBillRecord || 0
          }
          if (item.key == 5) {
            item.value = result.todayTradeRecord || 0
          }
        })
      }
    })
  }

  const setValue = computed(() => {
    let obj = {}
    selectedRowKeys.value.forEach((it) => {
      obj[it] = true
    })
    return obj
  })

  const refreshData = () => {
    selectedRowKeys.value = []
    loadData()
  }

  const moreFeeNameModalRef = ref(null)
  const costFeeModalRef = ref(null)
  const viewMoreFeeName = (record) => {
    if (record.recordStatus == 40) {
      return
    }
    // 去运营支出费用详情 报销费用流水：bizType=5;支出费用流水：bizType=6
    if (record.bizType == 5 || record.bizType == 6) {
      costFeeModalRef.value.open(record)
      return
    }
    moreFeeNameModalRef.value.show(record)
  }

  /**
   * 获取运营主体筛选项
   */
  const siteList = ref([])
  const getSiteList = () => {
    getOperateSubject().then((res) => {
      siteList.value = res.result.data.map((item) => {
        return {
          label: `${item.sourceName}-${item.subject}`,
          value: item.id,
        }
      })
    })
  }

  /**
   * 收付款账号
   */
  const accountList = ref([])
  const getAccountList = (value) => {
    getTenantAllAccount({
      ways: value || [],
    }).then((res) => {
      accountList.value = res.result.map((item) => {
        return {
          label: item.name,
          value: item.value,
        }
      })
    })
  }

  /**
   * 收支方式
   */
  const wayByAccountList = ref([])
  const getwayByAccountList = (account) => {
    getWayByAccount({
      accountList: account || [],
    }).then((res) => {
      wayByAccountList.value = res.result.map((item) => {
        return {
          label: item.name,
          value: item.value,
        }
      })
    })
  }

  // 跳转工单详情
  const toWorkDetail = (val) => {
    if (usePermission('svms:business:workOrder:work.details')) {
      navigateTo(
        `/work-order/detail/${val.workOrderId}?tab=1&orderId=${val.orderId}&workCode=${val.workOrderCode}&orderType=${
          val.orderType == 10 || val.orderType == 12 ? 1 : 2
        }`,
        `${val.workOrderCode}-工单详情`
      )
    }
  }
  const toiolaOrderDetail = (val) => {
    if (usePermission('svms:asstes:operation:car-violation.detail')) {
      navigateTo(`/car-violation/detail/${val.violationId}`, `${val.violationCode}-违章详情`)
    }
  }
  // 跳转业务单详情
  const carInspectDetailModalRef = ref()
  const carMaintenanceDetailModalRef = ref()
  const toOrderDetail = (val) => {
    if (val.orderType == 2) {
      if (usePermission('svms:asstes:car:car-model.detail.maintenanceRecord.detail')) {
        carMaintenanceDetailModalRef.value.open({ id: val.orderId })
      }
    } else if (val.orderType == 3) {
      if (usePermission('svms:asstes:car:car-repair.detail')) {
        navigateTo(`/car-repair/detail/${val.orderId}`, `${val.orderCode}-维修详情`)
      }
    } else if (val.orderType == 4) {
      if (usePermission('svms:asstes:car:car-model.detail.inspectRecord.detail')) {
        carInspectDetailModalRef.value.open({ id: val.orderId })
      }
    } else if (val.orderType == 5) {
      if (usePermission('svms:asstes:operation:car-violation.detail')) {
        navigateTo(`/car-violation/detail/${val.orderId}`, `${val.orderCode}-违章详情`)
      }
    } else if (val.orderType == 6) {
      if (usePermission('svms:asstes:operation:car-transfer.detail')) {
        navigateTo(`/car-transfer/detail/${val.orderId}`, `${val.orderCode}-借调详情`)
      }
    } else if (val.orderType == 10 || val.orderType == 12) {
      if (usePermission('svms:order:short-order.detail')) {
        navigateTo(`/short-order/detail/${val.orderId}`, `${val.orderCode}-短租详情`)
      }
    } else if (val.orderType == 11 || val.orderType == 13) {
      if (usePermission('svms:order:long-order.detail')) {
        navigateTo(`/long-order/detail/${val.orderId}`, `${val.orderCode}-长租详情`)
      }
    }
  }

  // 跳转渠道订单详情
  const toChannelOrderDetail = (val) => {
    if (val.orderType == 10 || val.orderType == 12) {
      if (usePermission('svms:order:short-order.detail')) {
        navigateTo(`/short-order/detail/${val.orderId}`, `${val.channelOrderCode}-渠道详情`)
      }
    } else {
      if (usePermission('svms:order:long-order.detail')) {
        navigateTo(`/long-order/detail/${val.orderId}`, `${val.channelOrderCode}-渠道详情`)
      }
    }
  }

  onMounted(() => {
    loadData()
    getNumsApi()
    getSiteList()
    getAccountList()
    getwayByAccountList()
  })
</script>

<style lang="less" scoped>
  .box {
    width: 200px;
    height: 40px;
    border: 1px solid wheat;
  }
  .box:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search {
    display: flex;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 400;
  }
  .quick-search-item {
    width: 20%;
    min-width: 160px;
    height: 62px;
    padding: 9px 16px;
    border-radius: 2px 2px 2px 2px;
    cursor: pointer;

    &.red {
      background-color: rgba(247, 105, 100, 1);
    }

    &.blue {
      background-color: rgba(149, 180, 252, 1);
    }
  }
  .quick-search-item:hover {
    transform: scale(1.1);
    transition: transform 0.3s;
    position: relative;
    z-index: 999;
  }
  .quick-search-item-checked {
    box-shadow: 0 4px 5px rgb(5 19 56 / 20%);
    &.red {
      border-bottom: 6px solid #e23838;
    }
    &.blue {
      border-bottom: 6px solid #5786f3;
    }
  }
  .quick-search-item:nth-of-type(n + 2) {
    margin-left: 20px;
  }
  .quick-search-item-label {
    font-size: 12px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
  }
  .quick-search-item-value {
    font-size: 20px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
  }

  .order-info-item {
    .custom-tag {
      margin-right: 8px;
      margin-bottom: 10px;
    }
  }
  .order-info-item + .order-info-item {
    margin-top: 10px;
  }

  .a-link {
    color: rgba(24, 144, 255, 1);
  }
</style>
